<template>
	<div>
		<van-nav-bar title="影院" id='daohang' @click-left ='toCity' @click-right ='toSearch'>
		  <template #left>
		    {{$store.state.cityName}}<van-icon name="arrow-down" size="15" color='black'/>
		  </template>
		  <template #right>
		    <van-icon name="search" size="20" color='black'/>
		  </template>
		</van-nav-bar>
		<div class="betterscroll" :style="{height:height}">
			<ul class="moveda">
				<li v-for="item in $store.state.cinema" :key="item.cinemaId" class="cinema_detail">
					<div>
						<span class='cinema_name'>{{item.name}}</span>
						<span class='cinema_adress'>{{item.address}}</span>
					</div>
					<div>
						<span class='cinema_price'>￥{{item.lowPrice/100}}起</span>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import BScroll from 'better-scroll'
	export default {
		mounted(){
			this.height = document.documentElement.clientHeight - document.querySelector('#daohang').offsetHeight+ 'px';
			if(this.$store.state.cinema.length == 0){
				this.$store.dispatch('getCinemaData', this.$store.state.cityId).then(res =>{
					this.$nextTick(() =>{
						new BScroll ('.betterscroll',{
							scrollbar:{
								fade:true
							}
						})
					})
				})
			}
			else{
				this.$nextTick(() =>{
					new BScroll ('.betterscroll',{
						scrollbar:{
							fade:true
						}
					})
				})
			}
		},
		data(){
			return{
				dataList:[],
				height:'0px'
			}
		},
		methods:{
			toCity(){
				this.$router.push('/City');
				this.$store.commit('clearCityCinema')
			},
			toSearch(){
				this.$router.push('/Search');
			}
		}
	}
</script>

<style>
	.moveda{
		overflow: hidden;
	}
	.cinema_detail{
		width: 100%;
		height: 3.71875rem;
		display: flex;
		padding: 0.625rem;
		padding-bottom: 1.25rem;
	}
	.cinema_detail>div:nth-child(1){
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.cinema_detail>div:nth-child(2){
		width: 3.5rem;
		margin-right: 0.625rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}
	.cinema_name{
		color: #000000;
		font-size: 16px;
	}
	.cinema_adress{
		color: #797D82;
		font-size: 14px;
		width: 15.625rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.cinema_price{
		color: orange;
		font-size: 15px;
	}
	.betterscroll{
		overflow: auto;
		position: relative;
	}
</style>
